<template>
	<scroll-view scroll-y="true" style="height: 400rpx;width: 520rpx;" scroll-with-animation="pl-3" :scroll-into-view="scrollIntoView">
		<view :id="'item' + item.id" class="flex rounded p-2 m-1 align-center" style="background-color: rgba(255,255,255,.125);" v-for="(item, index) in list" :key="index">
			<text class="text-danger mr-2">{{ item.name }} :</text>
			<text class="text-white">{{ item.content }}</text>
		</view>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			scrollIntoView: null
		};
	},
	methods: {
		//发送弹幕
		send(data){
			this.list.push(data);
			this.toBottom();
		},
		// 回到底部
		toBottom() {
			setTimeout(() => {
				let len = this.list.length;
				if (len > 0 && this.list[len - 1]) {
					this.scrollIntoView = 'item' + this.list[len - 1].id;
				}
			}, 200);
		}
	},
	mounted() {
		
	}
};
</script>

<style></style>
